import React, { Component } from 'react'
import QueueAnim from 'rc-queue-anim'
import { connect } from 'react-redux'
import { Avatar, List, Popconfirm, Row, Col, Button, Space, Drawer, message, Input, Form } from 'antd'
import { requestBrandlist, requestAddBrandList, requestRemoveBrandList, requestEditBrandList } from '../../api/brand'

export class Brands extends Component {
    state = {
        formRef: React.createRef(),
        initLoading: true,
        editVisible: false,
        edit: false,
        origin: '',
        listHeight: window.innerHeight - 250,
        list: [],
        hashMap: {},
        renderKeys: []
    }

    use = '品牌'

    api = {
        get: requestBrandlist,
        post: requestAddBrandList,
        put: requestEditBrandList,
        delete: requestRemoveBrandList
    }

    componentDidMount () {
        this.loadData(this.api.get)
    }

    loadData (get) {
        get().then(res => {
            this.setState({
                hashMap: res.hashMap,
                renderKeys: Object.keys(res.hashMap),
                list: res.data
            })
            console.log(res, Object.keys(res.hashMap))
            setTimeout(() => {
                this.setState({
                    initLoading: false
                })
            }, 400)
        })
    }

    Anchor (id) {
        const ele = document.getElementById(id)
        ele.scrollIntoView({
            behavior: 'smooth'
        })
    }

    add () {
        this.setState({
            editVisible: true,
            edit: false
        })
    }

    modify (item) {
        this.setState({
            origin: item,
            editVisible: true,
            edit: true
        }, () => {
            setTimeout(() => {
                this.state.formRef.current.setFieldsValue({ brand: item })
            }, 100)
        })
    }

    delete (item) {
        console.log('delete', item)
        this.api.delete(item).then(res => {
            message.success('删除' + this.use + '成功')
            this.loadData(this.api.get)
        })
    }

    onFinish (values) {
        if (!this.state.edit) {
            this.api.post(values.brand).then(res => {
                this.loadData(this.api.get)
                message.success('添加'+this.use+'成功')
            })
        } else {
            this.api.put(this.state.origin, values.brand).then(res=>{
                this.loadData(this.api.get)
                message.success('修改'+this.use+'成功')
            })
        }
        this.setState({
            editVisible:false
        })
        console.log(values)
    }

    handerEditVisible () {
        this.setState({
            editVisible: false
        })
    }

    element () {
        return <Space direction={'vertical'} style={{ width: '100%' }}>
            <Button type="primary" onClick={this.add.bind(this)}>添加{this.use}</Button>
            <Row>
                <Col flex="auto">
                    <List
                        className="demo-loadmore-list"
                        loading={this.state.initLoading}
                        itemLayout="horizontal"
                        dataSource={this.state.renderKeys}
                        style={{ width: '100%', height: this.state.listHeight, overflow: 'auto' }}
                        renderItem={index => {
                            let arr = []
                            arr.push(<h1 id={index} style={{
                                padding: 5,
                                lineHeight: '25px',
                                margin: 0,
                                marginTop: '10px'
                            }}>{index}</h1>)
                            for (let j = 0; j < this.state.hashMap[index].length; j++) {
                                arr.push(<List.Item
                                    // eslint-disable-next-line
                                    actions={[<a key="list-loadmore-edit"
                                                 onClick={this.modify.bind(this, this.state.hashMap[index][j])}>修改</a>,
                                        <Popconfirm title="确认删除？"
                                                    onConfirm={this.delete.bind(this, this.state.hashMap[index][j])}>
                                            {/*eslint-disable-next-line*/}
                                            <a key="list-loadmore-more">删除</a>
                                        </Popconfirm>
                                    ]}
                                >
                                    <List.Item.Meta
                                        avatar={<Avatar>{this.state.hashMap[index][j].slice(0, 1)}</Avatar>}
                                        title={this.state.hashMap[index][j]}
                                        description={'品牌：' + this.state.hashMap[index][j]}
                                    />
                                </List.Item>)
                            }
                            // console.log(element)
                            return arr
                        }}
                    />
                </Col>
                <Col flex="40px">
                    <div style={{ height: this.state.listHeight, overflow: 'auto' }}>
                        {this.state.renderKeys.map(item => <div onClick={this.Anchor.bind(this, item)} style={{
                            color: '#1890ff',
                            textAlign: 'center',
                            fontSize: 18
                        }}>{item}</div>)}
                    </div>
                </Col>
            </Row>
            <Drawer className="EditModel" visible={this.state.editVisible} width={500}
                    title={this.state.edit ? '修改' + this.use : '添加' + this.use}
                    onClose={this.handerEditVisible.bind(this)} footer={null}>
                <Form
                    name="basic"
                    ref={this.state.formRef}
                    labelCol={{
                        width: 600
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{ remember: true }}
                    onFinish={this.onFinish.bind(this)}
                    autoComplete="off"
                >
                    <Form.Item
                        label={this.use}
                        name="brand"
                        rules={[{ required: true, message: '请输入'+this.use } ]}
                    >
                        <Input placeholder={'请输入' + this.use + '名称'}/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
        </Space>
    }

    render () {
        return <QueueAnim className="demo-content" key="demo">
            {this.props.show ? <div className="demo-tbody" key="a">{this.element()}</div> : null}
        </QueueAnim>
    }
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(Brands)
